import React, { useState, useEffect } from 'react';
import './index.less';
import DatePicker from '@/compontent/form/datePicker';
import Tree from '@/compontent/form/tree';
import GroupCheckbox from '@/compontent/form/groupCheckbox';
import Cascader from '@/compontent/form/cascader';
import Message from '@/compontent/comm/message';
import Select from '@/compontent/form/select';
import Popup from '@/compontent/comm/popup';
import DargForm from '@/compontent/dargform';
import ColorPicker from '@/compontent/comm/colorPicker';
import { RootState } from '@/redux';
import { useSelector } from 'react-redux';
import * as Inter from '../interface';

const optionBox = [
  { label: '选项1', value: false },
  { label: '选项2', value: false }
];
let cascaderList = [
  { label: '姓名', value: '张三' },
  { label: '姓名', value: '里斯' },
  { label: '姓名', value: '王二' },
  { label: '姓名', value: '麻子' },
  { label: '姓名', value: '瓜皮' }
];

const Panel = () => {
  const assemblyActive = useSelector((state: RootState) => state.ComState.assemblyActive);
  const [scrollList, setScrollList] = useState<Array<string | number>>([]);
  const [formList] = useState(Inter.list);
  const [checked, setChecked] = useState([false, false]);
  const [cascaderValue, setCascaderValue] = useState(['上海市', '上海市', '徐汇区']);
  const [options] = useState([]);

  function checkChange(value) {
    setChecked([...value]);
  }
  // 滚动条加载
  function scrollFn(top, bottom) {
    if (bottom) setScrollList([...scrollList, '得到']);
    if (top) setScrollList(['失去', ...scrollList]);
  }
  //
  function cascaderChange(value) {
    setCascaderValue(value);
  }

  function renderSwetch() {
    let name = formList[assemblyActive].name;
    switch (name) {
      case 'Checkbox':
        return <GroupCheckbox change={checkChange.bind(this)} option={optionBox} value={checked} />;
      case 'DatePicker':
        return <DatePicker value="" defaultValue="" onChange={() => {}} />;
      case 'Tree':
        return <Tree />;
      case 'Message':
        return Message('消息提示');
      case 'Select':
        return <Select options={options} />;
      case 'Cascader':
        return <Cascader defaultValue={cascaderValue} onChange={cascaderChange.bind(this)} />;
      case 'Popup':
        return (
          <Popup content="adsaasdsa">
            <span>移入提示</span>
          </Popup>
        );
      case 'ColorPicker':
        return <ColorPicker />;
      case 'DargForm':
        return <DargForm />;

      default:
        return '正在筹备';
    }
  }
  useEffect(() => {
    let arr: Array<number> = [];
    for (let i = 0; i < 40; i++) {
      arr.push(i);
    }
    setScrollList(arr);
  }, []);
  return <div className="panel">{renderSwetch()}</div>;
};

export default Panel;
